<template>
  <div class="container" style="position: relative; height: 100%; width: 100%;">
    <!-- <div class="header-container">
        <div class="zIndex" @click="returnBacks">
            <van-icon name="arrow-left" />
        </div>
        <slot></slot>
    </div> -->
    <Message :singerMessage="singerMessage"/>
    <List :singerHotSinger="singerHotSinger"/>
  </div>
</template>

<script>
import { singerList } from '../../../api/hotSinger.js'
import Message from './components/message'
import List from './components/list'
import Vue from 'vue'
import { Icon } from 'vant';
Vue.use(Icon)
export default {
  name: 'SingerList',
  data() {
    return {
      singerMessage: {},
      singerHotSinger: [],
    }
  },
  mounted() {
    let id = this.$route.params.id
    singerList(id).then(res => {
      this.singerMessage = res.data.artist
      this.singerHotSinger = res.data.hotSongs
    })
  },
  methods: {
    returnBacks() {}
  },
  components: {
    Message,
    List,
  }
}
</script>

<style lang="scss">
  .container >>> .van-icon {
    height: 100%;
    width: 80px;
    line-height: 100px;
  }
  .header-container {
    position: fixed;
    top: 0;
    width:  100%;
    height: 80px;
    z-index: 10000;
  }
</style>